import "taro-ui/dist/style/components/button.scss" // 按需引入
import { View, Text, CoverView, Map, Image} from '@tarojs/components'
import './billInfo.less'
import { AtIcon } from 'taro-ui'
import "taro-ui/dist/style/components/icon.scss";

function BillInfo() {

    const normalCallout = {
        id: 1,
        latitude: 23.098994,
        longitude: 113.32252,
        callout: {
            content: '距离用户220m',
            color: '#ff0000',
            fontSize: 12,
            borderWidth: 2,
            borderRadius: 10,
            borderColor: '#000000',
            bgColor: '#fff',
            padding: 5,
            display: 'ALWAYS',
            textAlign: 'center',
        }
    }

    const customCallout1 = {
        id: 2,
        latitude: 23.097994,
        longitude: 113.32352,
        customCallout: {
            anchorY: 0,
            anchorX: 0,
            display: 'ALWAYS',
        },
    }

    const customCallout2 = {
        id: 3,
        latitude: 23.096994,
        longitude: 113.32452,
        customCallout: {
            anchorY: 0,
            anchorX: 0,
            display: 'ALWAYS',
        },
    }

    const customCallout3 = {
        id: 4,
        latitude: 23.095994,
        longitude: 113.32552,
        customCallout: {
            anchorY: 0,
            anchorX: 0,
            display: 'ALWAYS',
        },
    }

    const customMarkers = [
        customCallout1,
        customCallout2,
        customCallout3,
    ]

    const mapMarkers = [
        normalCallout,
        ...customMarkers
    ]

    return <View className="billInfoCss">
        {/* 地图背景 */}
        <View className="mapBox">
            <Map
                setting={{}}
                markers={mapMarkers}
                latitude={23.096994}
                longitude={113.324520}
                style={{ height: '100vh', width: '100vw' }}
            >
                <CoverView slot='callout'>
                    {
                        customMarkers.map(item => (
                            /** 自定义样式的 callout */
                            <CoverView marker-id={item.id} key={item.id} >
                                <View>导航{item.id}</View>
                            </CoverView>
                        ))
                    }
                </CoverView>
            </Map>
        </View>
        {/* 上面浮动的服务信息 */}
        <View className="floatBox">
            {/* 刷新按钮 */}
            <View className="reloadBox">
                <AtIcon value='reload' size='24' color='#555'></AtIcon>
            </View>
            {/* 距离信息 */}
            <View className="distanceBox">
                <Text>您已接单，距离用户310m</Text>
            </View>
            {/* 联系信息 */}
            <View className="contactInfoBox">
                {/* 联系平台 */}
                <View>
                    <View><AtIcon value='phone' size='24' color='#fff'></AtIcon></View>
                    <Text>联系平台</Text>
                </View>
                {/* 联系用户 */}
                <View>
                    <View><AtIcon value='user' size='24' color='#fff'></AtIcon></View>
                    <Text>联系用户</Text>
                </View>
                {/* 取消订单 */}
                <View>
                    <View><AtIcon value='close' size='18' color='#fff'></AtIcon></View>
                    <Text>取消订单</Text>
                </View>
            </View>
            {/* 助医服务 */}
            <View className="helpBox">
                <View className="hBtop">
                    <View className="hbImgBox">
                        <Image src="https://img0.baidu.com/it/u=1272163934,1051423405&fm=26&fmt=auto&gp=0.jpg"></Image>
                        <Text>助医服务</Text>
                    </View>
                    <View className="hbPriBox">
                        <Text>￥</Text>
                        <Text>38</Text>
                    </View>
                </View>
                <View className="hBbottom">
                    <Text>小计</Text>
                    <Text>￥</Text>
                    <Text>0</Text>
                </View>
            </View>
            {/* 服务详细信息 */}
            <View className="detailBox">
                <Text>服务信息</Text>
                <View>
                    <Text>服务地址</Text>
                    <Text>上海黄埔黄埔边上的</Text>
                </View>
                <View>
                    <Text>电话</Text>
                    <Text>15886987369</Text>
                </View>
                <View>
                    <Text>陪护员</Text>
                    <Text>张小花</Text>
                </View>
            </View>
            {/* 订单信息 */}
            <View className="billBox">
                <Text>订单信息</Text>
                <View>
                    <Text>备注</Text>
                    <Text>来个技术好的</Text>
                </View>
                <View>
                    <Text>订单编号</Text>
                    <View>
                        <Text>1588698736454649</Text>
                        <Text>复制</Text>
                    </View>
                </View>
                <View>
                    <Text>下单时间</Text>
                    <Text>2018-12-12 00:12:23</Text>
                </View>
                <View>
                    <Text>支付方式</Text>
                    <Text>免支付</Text>
                </View>
            </View>
        </View>



    </View>
}



export default BillInfo;
